<template>
  <empty v-if="isEmpty()"></empty>
  <tile v-if="has('kageshi') && !(has('twitch'))" display="full">
     <kageshi></kageshi>
  </tile>
  <tile v-if="has('twitch') && !(has('kageshi'))" display="full">
    <twitch></twitch>
  </tile>
  <tile v-if="has('twitch') && has('kageshi')" display="seventy-thirty">
    <twitch slot="seventy"></twitch>
    <kageshi slot="thirty"></kageshi>
  </tile>
  <tile v-if="hasSeveral('facebook', 'twitter', 'youtube')">
    <social slot="social"></social>
  </tile>
</template>

<script>
  'use strict';

  import { values } from 'lodash';
  import { head } from 'ramda';
  import empty from './empty.vue';
  import social from '../social/list.vue';
  import tile from './tile.vue';
  import kageshi from '../service/kageshi.vue';
  import twitch from '../service/twitch.vue';

  export default {
    components: {
      empty, social, tile, kageshi, twitch,
    },
    data() {
      return {
        selected: this.$select('selected'),
      }
    },
    methods: {
      isEmpty() {
        return !(this.hasSeveral('twitch', 'kageshi'));
      },
      has(service) {
        if (!this.selected[service]) {
          return false;
        }
        return this.selected[service].trim().length !== 0;
      },
      hasSeveral(...services) {
        return head(services.filter(this.has));
      },
    },
  }
</script>
